<template>
  <div class="echart-box">
    <div ref="echart" class="echart"></div>
    <div class="content">
      <div class="value">75%</div>
      <div class="name">沙石</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        tooltip: {
          trigger: 'item',
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: ['90%', '100%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 75,
                itemStyle: {
                  color: '#00fff4'
                }
              },
              {
                value: 25,
                itemStyle: {
                  color: '#60686a'
                }
              }
            ],
          },
          {
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 75,
                itemStyle: {
                  color: '#006a7e'
                }
              },
              {
                value: 25,
                itemStyle: {
                  color: '#262d48'
                }
              }
            ],
          },
        ],
      }
      this.echart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">

.echart {
  width: 100%;
  height: 100%;
}
.echart-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    .value {
      color: #7dcdff;
      line-height: 40px;
    }
    .name {
      line-height: 40px;
    }
  }
}
</style>
